<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
		<style>
			.el-tag+.el-tag {
				margin-left: 10px;
			}

			.button-new-tag {
				margin-left: 10px;
				height: 32px;
				line-height: 30px;
				padding-top: 0;
				padding-bottom: 0;
			}

			.input-new-tag {
				width: 90px;
				margin-left: 10px;
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-tag>标签一</el-tag>
			<el-tag type="success">标签二</el-tag>
			<el-tag type="info">标签三</el-tag>
			<el-tag type="warning">标签四</el-tag>
			<el-tag type="danger">标签五</el-tag>
			<hr />

			<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
				{{tag.name}}
			</el-tag>
			<hr />

			<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
				@close="handleClose(tag)">
				{{tag}}
			</el-tag>
			<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
				@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
			</el-input>
			<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
			<hr />

			<el-tag closable>默认标签</el-tag>
			<el-tag size="medium" closable>中等标签</el-tag>
			<el-tag size="small" closable>小型标签</el-tag>
			<el-tag size="mini" closable>超小标签</el-tag>
			<hr />

			<div class="tag-group">
				<span class="tag-group__title">Dark</span>
				<el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
					{{ item.label }}
				</el-tag>
			</div>
			<div class="tag-group">
				<span class="tag-group__title">Plain</span>
				<el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain">
					{{ item.label }}
				</el-tag>
			</div>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				tags: [{
						name: '标签一',
						type: ''
					},
					{
						name: '标签二',
						type: 'success'
					},
					{
						name: '标签三',
						type: 'info'
					},
					{
						name: '标签四',
						type: 'warning'
					},
					{
						name: '标签五',
						type: 'danger'
					}
				],
				dynamicTags: ['标签一', '标签二', '标签三'],
				inputVisible: false,
				inputValue: '',
				items: [{
						type: '',
						label: '标签一'
					},
					{
						type: 'success',
						label: '标签二'
					},
					{
						type: 'info',
						label: '标签三'
					},
					{
						type: 'danger',
						label: '标签四'
					},
					{
						type: 'warning',
						label: '标签五'
					}
				]
			},
			methods: {
				handleClose(tag) {
					this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				},

				showInput() {
					this.inputVisible = true;
					this.$nextTick(_ => {
						this.$refs.saveTagInput.$refs.input.focus();
					});
				},

				handleInputConfirm() {
					let inputValue = this.inputValue;
					if (inputValue) {
						this.dynamicTags.push(inputValue);
					}
					this.inputVisible = false;
					this.inputValue = '';
				}
			}
		})
	</script>

</html>